<template>
  <div class="home-content">
    <el-row>
      <el-col :span="24">
        <swiper-banner></swiper-banner>
      </el-col>
    </el-row>
    <div class="safe-width">
      <el-row>
      <el-col :md="8" :xs="24">
        <div class="wrapper-item h420">
          <card-text></card-text>
        </div>
      </el-col>
      <el-col :md="8" :sm="12" :xs="24">
        <div class="wrapper-item h420">
          <card-image></card-image>
        </div>
      </el-col>
      <el-col :md="8" :sm="12" :xs="24">
        <div class="wrapper-item h420">
          <card-image></card-image>
        </div>
      </el-col>
      <el-col :md="18" :xs="24">
        <div class="wrapper-item mg0 pd10">
          <card-image-text></card-image-text>
        </div>
        <div class="wrapper-item mg0 pd10">
          <card-image-text></card-image-text>
        </div>
        <div class="wrapper-item mg0 pd10">
          <card-image-text2></card-image-text2>
        </div>
        <div class="wrapper-item mg0 pd10">
          <card-image-text></card-image-text>
        </div>
        <div class="wrapper-item mg0 pd10">
          <card-image-text></card-image-text>
        </div>
      </el-col>
      <el-col :md="6" :xs="24">
        <div class="wrapper-item mg0 pd10">
          <search1></search1>
        </div>
        <div class="wrapper-item mg0 pd10">
          <post1></post1>
        </div>
        <div class="wrapper-item mg0 pd10">
          <tag1></tag1>
        </div>
      </el-col>
    </el-row>
    </div>
    <!-- 底部轮播 -->
    <swiper-base></swiper-base>
  </div>
</template>

<script>
import cardText from '@/components/textcard/cardText'
import cardImage from '@/components/textcard/cardImage'
import cardImageText2 from '@/components/textcard/cardImageText2'
import cardImageText from '@/components/textcard/cardImageText'
import search1 from '@/components/search/search1'
import tag1 from '@/components/tags/tag1'
import post1 from '@/components/posts/post1'
import swiperBase from '@/components/swiper/swiper_base'
import swiperBanner from '@/components/swiper/swiper_banner'
export default {
  name: 'home-content',
  components: {
    cardText, cardImage, cardImageText, cardImageText2, search1, tag1, post1, swiperBase, swiperBanner
  }
}
</script>

<style scoped lang="less">
.home-content{
  .safe-width{
    margin: 0 auto;
  }
}
</style>
